<!-- 用户笔记 -->
<template>
  <div class="box">
    <div class="search">
      <div class="search-input">
        <el-input
          placeholder="输入内容"
          v-model="input"
          clearable
          @keydown.enter="searchKeyWord"
          maxlength="20"
          show-word-limit
          />
      </div>
      <div class="search-search">
        <el-button type="primary" @click="searchKeyWord()">搜索</el-button>
      </div>
      <div class="search-add">
        <el-button type="danger" @click="delIsChecked()">全部删除</el-button>
      </div>
    </div>

    <div class="body" ref="wrap">
      <el-table 
        :data="dynamicList"
        border  
        :row-selection="true"
        @selection-change="selectionChange"
        v-loading="isShow" 
        style="width: 100%;height:100%" 
        empty-text=" "
        ref="multipleTable"
        height="100%"
        :row-style="{height: '50px'}"
        highlight-current-row
        >
        <el-table-column type="selection" width="50" />
        <el-table-column label="序号" width="60" :show-overflow-tooltip="true">
          <template #default="scope">
            {{(pageNum-1) * pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="180" :show-overflow-tooltip="true"/>
        <el-table-column prop="chooseTitle" label="题目内容" :show-overflow-tooltip="true"/>
        <el-table-column prop="nodeContent" label="笔记" :show-overflow-tooltip="true"/>
        <el-table-column prop="createTime" label="笔记时间" :show-overflow-tooltip="true" width="200"/>
        <el-table-column label="操作" :show-overflow-tooltip="true" align="center" width="200">
          <template #default="scope" >
            <div style="display:inline-block;">
              <el-button type="warning" @click="getNum(scope.$index, scope.row)" class="change" style="width:80%;height:40%">
                修改 </el-button></div>
            <div style="display:inline-block;">
              <el-popconfirm title="是否删除？"  @confirm="dele(scope.row.noticeId)" >
                <template #reference>
                    <el-button type="danger" class="delet" style="width:80%;height:40%">删除</el-button>
                  </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bottom">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            @current-change="changePage"
            @prev-click="changePage"
            @next-click="changePage"
            :total="allPages"
        >
        </el-pagination>
    </div>
  </div>
</template>

<script>

import {getAllUsers,getAllUser,getTopic,getUser} from "@/api/secondary_api/PageUserNote"

export default {
data(){
  return{
    isShow: true,
    dynamicList:[],//一页用户
    pageNum:1,//当前页
    pageSize:0,//每页显示的条数
    allPages:0,//一共多少页
    multipleSelection:[],//
    showInput:false,//
    input:"",//
  }
},
methods:{
  delIsChecked(){

  },
  searchKeyWord(){//

  },
  selectionChange(val) {//全选
      this.multipleSelection = val;
  },
  getNum(index,row){//
    console.log(index,row);
  },
  dele(id){//
    console.log(id)
  },
  changePage(e){//分页
    this.isShow = true;
    this.pageNum = e
    this.getAllNotices()
  },
  getAllNotices(){//分页查询
    getAllUsers().then(//
      response=>{
        this.allPages = response.data.length
    })

    getAllUser(this.pageNum,this.pageSize).then(//
      response1=>{
        if(response1.code ==200){
          for(let i = 0;i<response1.data.length; i++){
            getUser(response1.data[i].userId).then(
              response=>{
                Object.assign(response1.data[i],{'nickname': response.data.nickname});
              }
            ) 
            getTopic(response1.data[i].topicId).then(
              response=>{
                Object.assign(response1.data[i],{'chooseTitle': response.data.chooseTitle});
              }
            ) 
          }
          setTimeout(() => {
            console.log(response1.data)
            this.dynamicList = response1.data
            this.isShow =false
          }, 800);
        }
    })
  },
  
},
mounted(){
  this.$nextTick(()=>{//计算每页显示多少条
      let $ele = this.$refs.wrap
      let height = $ele.offsetHeight
      this.pageSize = parseInt(height/50);
  })
  setTimeout(() => {
    this.getAllNotices()
  }, 200);
},
}
</script>

<style scoped>
.box{
width: 100%;
height: 100%;
padding: 1% 4%;
box-sizing: border-box;
}
.search{
width: 100%;
height: 60px;
line-height: 30px;
}
.search-input{
width: 30%;
height: 100%;
float: left;
}
.search-search{
width: 10%;
height: 100%;
float: left;
margin-left: 20px;
}
.search-add{
width: 10%;
height: 100%;
float: left;
margin-left: 3%;
}
.search-input .el-input{
height: 70% !important;
font-size: 17px;
}
.search-search .el-button,.search-add .el-button{
width: 90%;
height:70%;
font-size: 14px;
}
.body{
width: 100%;
height: 82%;
box-sizing: border-box;
border: 1px solid #ccc;
margin-top: 10px;
}
.change{
background-color: #ffb800;
font-size: 13px !important;
}
.delet{
background-color: red;
font-size: 13px;
}
.change:hover,.delet:hover{
opacity: 0.4;
}
.bottom{
margin-top: 15px;
}
</style>